Documentation

Vous pouvez changer la taille des cercles ou leurs rayons, le plugin s'adapte automatiquement.

Pour changer la valeur des .js-loader il vous suffit d'appeller la méthode dbmLoader._setValue() avec pour premier paramètre le loader que vous voulez cibler ou son index (0 ciblera le premier .js-loader) et le pourcentage souhaité en deuxième paramètre.

.js requis :

Loader pourcentage

Preview

Balisage


                
                    <div class="js-loader">
                        <svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="5" cy="5" r="4"></circle>
                        </svg>
                        <svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="5" cy="5" r="4"></circle>
                        </svg>
                        <div class="u-center js-loader__value"></div>
                    </div>
                    <input type="range" onchange="updateLoader(this, 0);"/>
                    <script>
                        function updateLoader(slider, indexLoader){
                            console.log(slider.value);
                            dbmLoader._setValue(indexLoader, slider.value);
                        }
                        
                    </script>

Loader indéfini

Preview

Balisage


                
                    <div class="js-loader--infinite">
                        <svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="5" cy="5" r="4"></circle>
                        </svg>
                        <svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="5" cy="5" r="4"></circle>
                        </svg>
                        <div class="u-center c-fonticon__logo-datasprint u-title"></div>
                    </div>